<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew
        title="控编维度"
        :breadCrumb="['组织', '基础设置', '控编维度']"
        :isShowBtn="true"
        showBack
      >
        <a-button @click="upDate" type="primary">保存</a-button>
      </PageHeaderNew>
    </template>
    <div class="main">
      <a-tabs
        lazy-load
        type="card-gutter"
        show-add-button
        auto-switch
        @change="tabChange"
      >
        <a-tab-pane key="0" title="组织控编">
          <a-radio-group v-model="data[0].status" @change="radioChange">
            <a-radio :value="1"> 不编控 </a-radio>
            <a-divider />
            <div style="display: flex; align-items: end">
              <a-radio ref="radio" :value="2"> 非严格控编 </a-radio>
              <div>
                <div>
                  <a-input-number
                    :disabled="unstrictDisabled"
                    v-model="noUpStrict"
                    style="padding-right: 0; width: 320px"
                    placeholder="请输入百分比"
                    allow-clear
                  >
                    <template #suffix>
                      <div class="radioB">%</div>
                    </template>
                  </a-input-number>
                  <a-checkbox style="margin-right: 13px" value="1">
                    预警
                  </a-checkbox>

                  <a-input-number
                    :disabled="unstrictDisabled"
                    v-model="noStrict"
                    style="padding-right: 0; width: 320px"
                    placeholder="0"
                    allow-clear
                  >
                    <template #suffix>
                      <div class="radioA">%预警</div>
                    </template>
                  </a-input-number>
                </div>
                <div style="display: flex; margin-top: 20px">
                  <icon-exclamation-circle-fill style="color: #165dff" />
                  例如:定员工人数超过控编120%以上，则无法继续新增员工数量
                </div>
              </div>
            </div>
            <a-divider />
            <div style="display: flex; align-items: end">
              <a-radio :value="3"> 严格控编 </a-radio>

              <div class="numipt" style="margin-left: 60px">
                <a-input-number
                  :disabled="strictDisabled"
                  v-model="strict"
                  style="padding-right: 0; width: 320px"
                  placeholder="请输入百分比"
                  allow-clear
                >
                  <template #suffix>
                    <div class="radioB">%预警</div>
                  </template>
                </a-input-number>
                <div style="display: flex; margin-top: 20px">
                  <icon-exclamation-circle-fill style="color: #165dff" />
                  例如:设定员工人数超过控编80%以上，系统则会自动发出预警
                </div>
              </div>
            </div>
          </a-radio-group>
        </a-tab-pane>
        <a-tab-pane key="1" title="职位控编">
          <a-radio-group v-model="data[1].status" @change="radioChange">
            <a-radio :value="1"> 不编控 </a-radio>
            <a-divider />
            <div style="display: flex; align-items: end">
              <a-radio ref="radio" :value="2"> 非严格控编 </a-radio>
              <div>
                <div>
                  <a-input-number
                    :disabled="unstrictDisabled"
                    v-model="noUpStrict"
                    style="padding-right: 0; width: 320px"
                    placeholder="请输入百分比"
                    allow-clear
                  >
                    <template #suffix>
                      <div class="radioB">%</div>
                    </template>
                  </a-input-number>
                  <a-checkbox style="margin-right: 13px" value="1">
                    预警
                  </a-checkbox>
                  <a-input-number
                    :disabled="unstrictDisabled"
                    v-model="noStrict"
                    style="padding-right: 0; width: 320px"
                    placeholder="0"
                    allow-clear
                  >
                    <template #suffix>
                      <div class="radioA">%预警</div>
                    </template>
                  </a-input-number>
                </div>
                <div style="display: flex; margin-top: 20px">
                  <icon-exclamation-circle-fill style="color: #165dff" />
                  例如:定员工人数超过控编120%以上，则无法继续新增员工数量
                </div>
              </div>
            </div>
            <a-divider />
            <div style="display: flex; align-items: end">
              <a-radio :value="3"> 严格控编 </a-radio>
              <div class="numipt" style="margin-left: 60px">
                <a-input-number
                  :disabled="strictDisabled"
                  v-model="strict"
                  style="padding-right: 0; width: 320px"
                  placeholder="请输入百分比"
                  allow-clear
                >
                  <template #suffix>
                    <div class="radioB">%预警</div>
                  </template>
                </a-input-number>
                <div style="display: flex; margin-top: 20px">
                  <icon-exclamation-circle-fill style="color: #165dff" />
                  例如:设定员工人数超过控编80%以上，系统则会自动发出预警
                </div>
              </div>
            </div>
          </a-radio-group>
        </a-tab-pane>
        <a-tab-pane key="2" title="人员类别控编">
          <a-radio-group v-model="data[2].status" @change="radioChange">
            <a-radio :value="1"> 不编控 </a-radio>
            <a-divider />
            <div style="display: flex; align-items: end">
              <a-radio :value="2"> 非严格控编 </a-radio>
              <div>
                <div>
                  <a-input-number
                    :disabled="unstrictDisabled"
                    v-model="noUpStrict"
                    style="padding-right: 0; width: 320px"
                    placeholder="请输入百分比"
                    allow-clear
                  >
                    <template #suffix>
                      <div class="radioB">%</div>
                    </template>
                  </a-input-number>
                  <a-checkbox style="margin-right: 13px" value="1">
                    预警
                  </a-checkbox>
                  <a-input-number
                    :disabled="unstrictDisabled"
                    v-model="noStrict"
                    style="padding-right: 0; width: 320px"
                    placeholder="0"
                    allow-clear
                  >
                    <template #suffix>
                      <div class="radioA">%预警</div>
                    </template>
                  </a-input-number>
                </div>
                <div style="display: flex; margin-top: 20px">
                  <icon-exclamation-circle-fill style="color: #165dff" />
                  例如:定员工人数超过控编120%以上，则无法继续新增员工数量
                </div>
              </div>
            </div>
            <a-divider />
            <div style="display: flex; align-items: end">
              <a-radio :value="3"> 严格控编 </a-radio>
              <div class="numipt" style="margin-left: 60px">
                <a-input-number
                  :disabled="strictDisabled"
                  v-model="strict"
                  style="padding-right: 0; width: 320px"
                  placeholder="请输入百分比"
                  allow-clear
                >
                  <template #suffix>
                    <div class="radioB">%预警</div>
                  </template>
                </a-input-number>
                <div style="display: flex; margin-top: 20px">
                  <icon-exclamation-circle-fill style="color: #165dff" />
                  例如:设定员工人数超过控编80%以上，系统则会自动发出预警
                </div>
              </div>
            </div>
          </a-radio-group>
        </a-tab-pane>
      </a-tabs>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import {
  getManagementControl,
  setManagementControl
} from '@/apis/management/organization/baseSetting/ManagementControl/index';
// interface quantityControls {
//   upperLimit: number;
//   earlyWarning: number;
//   typeNum: number;
//   status: number;
// }
const data: any = ref([
  { upperLimit: 0, earlyWarning: 0, type: 1, status: 0 },
  { upperLimit: 0, earlyWarning: 0, type: 2, status: 0 },
  { upperLimit: 0, earlyWarning: 0, type: 3, status: 0 }
]);
const strict = computed({
  get: () => {
    return data.value[type.value].status === 3
      ? data.value[type.value].upperLimit
      : 0;
  },
  set: (val) => {
    data.value[type.value].upperLimit = val;
  }
});
const noUpStrict = computed({
  get: () => {
    return data.value[type.value].status === 2
      ? data.value[type.value].upperLimit
      : 0;
  },
  set: (val) => {
    data.value[type.value].upperLimit = val;
  }
});
const noStrict = computed({
  get: () => {
    return data.value[type.value].status === 2
      ? data.value[type.value].earlyWarning
      : 0;
  },
  set: (val) => {
    data.value[type.value].earlyWarning = val;
  }
});
const strictDisabled = computed(() => !(data.value[type.value].status === 3));
const unstrictDisabled = computed(() => !(data.value[type.value].status === 2));
const getData = async () => {
  try {
    const res: any = await getManagementControl();
    if (res.length === 0) return;
    data.value = res;
  } catch (error) {
    console.log(error);
  }
};
const type = ref(0);

onMounted(() => {
  getData();
});
const tabChange = (e: any) => {
  type.value = Number(e);
  console.log(noStrict.value);
};
const radioChange = (e: any) => {
  data.value[type.value].status = Number(e);
  data.value[type.value].upperLimit = 0;
  data.value[type.value].earlyWarning = 0;
};
const upDate = async () => {
  console.log({ quantityControls: data.value });
  await setManagementControl({ quantityControls: data.value });
};
</script>
<style lang="less" scoped>
::v-deep .arco-tabs-tab {
  margin-left: 0 !important;
  border-bottom: 1px solid rgb(229 230 235) !important;
}
::v-deep .arco-tabs-content {
  border: none !important;
}
::v-deep .arco-radio {
  height: 80px;
}

.main {
}
.numipt {
  margin-left: 50px;
  display: flex;
  flex-direction: column;
}
.radioA {
  margin-right: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  border-left: 1px solid rgb(229 230 235);
}
.radioB {
  margin-right: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 100%;
  border-left: 1px solid rgb(229 230 235);
}
.radioC {
  margin-right: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  border-left: 1px solid rgb(229 230 235);
}
</style>
